<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<!--学校科研工作量-->

<head>
    <th:block th:include="include :: header('表格虚拟滚动')" />
    <!--    <style>-->
    <!--        .fixed-column-1{-->
    <!--            position: sticky; /* 固定列 */-->
    <!--            left: 0;          /* 第一列固定在最左侧 */-->
    <!--            background-color: white; /* 背景颜色 */-->
    <!--            z-index: 10;      /* 确保覆盖其他内容 */-->
    <!--        }-->
    <!--        .fixed-column-2{-->
    <!--            position: sticky; /* 固定列 */-->
    <!--            left: 70px;       /* 第二列固定在第一列右侧，宽度为 50px */-->
    <!--            background-color: white; /* 背景颜色 */-->
    <!--            z-index: 9;       /* 确保覆盖其他内容，但低于第一列的层级 */-->
    <!--        }-->
    <!--    </style>-->
</head>
<body>
<div class="container-div">
    <div class="btn-group-sm" id="toolbar" role="group">
        &nbsp;&nbsp;<span id="total" class="badge badge-success"></span>
        <a class="btn btn-warning" onclick="$.table.exportExcel()">
            <i class="fa fa-download"></i> 导出
        </a>
    </div>
    <div class="row">
        <div class="col-sm-12 select-table table-bordered">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.21.3/dist/bootstrap-table.min.js"></script>
<th:block th:include="include :: bootstrap-table-fixed-columns-js" />
<script>

    var total = 0;
    var prefix = "work";

    $(function() {
        var options = {
            url: prefix + "/list",
            exportUrl: prefix + "/export",
            modalName: '学校科研工作量',
            method: "post",
            height: "100%",
            sidePagination: "server",
            pagination: true,
            pageSize: 10,
            showSearch: false,
            showExport:true,
            clickToSelect:true,
            virtualScroll: true,
            undefinedText:0,//没有数据默认值

            fixedColumns: true,
            fixedNumber:3,
            columns: [{
                checkbox: true,
            },
                {
                    field: 'parentName',
                    title: '学院名称',
                    align: 'center',
                    class:"fixed-column-1",
                },
                {
                    field: 'deptName',
                    title: '专业名称',
                    align: 'center',
                    class:"fixed-column-2",
                },
                {
                    field: '横向课题科研项目',
                    title: '横向课题科研项目',
                    align: 'center',
                    formatter: function (value, row, index) {
                        // 如果 value 为空或未定义，则返回默认值 0
                        return value || 0;
                    }
                },
                {
                    field: '纵向课题科研项目-校级以上',
                    title: '纵向课题科研项目-校级以上',
                    align: 'center',
                    formatter: function (value, row, index) {
                        // 如果 value 为空或未定义，则返回默认值 0
                        return value || 0;
                    }
                },
                {
                    field: '纵向课题科研项目-校级',
                    title: '纵向课题科研项目-校级',
                    align: 'center',

                },
                {
                    field: '论文-积分',
                    title: '论文-积分',
                    align: 'center',

                },
                {
                    field: '讲座报告-积分',
                    title: '讲座报告-积分',
                    align: 'center',

                },
                {
                    field: '教材软著-积分',
                    title: '教材软著-积分',
                    align: 'center',

                },
                {
                    field: '成果转化-积分',
                    title: '成果转化-积分',
                    align: 'center',

                },
                {
                    field: '专利-积分',
                    title: '专利-积分',
                    align: 'center',

                },
                {
                    field: '软著-积分',
                    title: '软著-积分',
                    align: 'center',
                },
                {
                    field: '奖励-积分',
                    title: '奖励-积分',
                    align: 'center',
                },
            ]
        }
        $.table.init(options);

        $('#bootstrap-table').on('load-success.bs.table', function (data) {
            var $table = $(this);
            var $tbody = $table.find('tbody');

            // 获取表格配置中的列信息
            var columns = $table.bootstrapTable('getOptions').columns[0]; // 获取第一层列定义

            // 初始化总计变量
            var totals = {
                '横向课题科研项目': 0,
                '纵向课题科研项目-校级以上': 0,
                '纵向课题科研项目-校级': 0,
                '论文-积分': 0,
                '讲座报告-积分': 0,
                '教材软著-积分': 0,
                '成果转化-积分': 0,
                '专利-积分': 0,
                '软著-积分': 0,
                '奖励-积分': 0
            };

            // 动态获取列索引
            var columnIndexMap = {};
            columns.forEach(function (column, index) {
                if (column.field) {
                    columnIndexMap[column.field] = index;
                }
            });
            var fixedIndexes = [6,13,17];
            // 遍历表格数据，计算总计并插入总计行
            $tbody.find('tr').each(function (index) {
                var $row = $(this);

                // 跳过选择框列，根据字段名动态获取列索引
                totals['横向课题科研项目'] += parseFloat($row.find(`td:eq(${columnIndexMap['横向课题科研项目']})`).text()) || 0;
                totals['纵向课题科研项目-校级以上'] += parseFloat($row.find(`td:eq(${columnIndexMap['纵向课题科研项目-校级以上']})`).text()) || 0;
                totals['纵向课题科研项目-校级'] += parseFloat($row.find(`td:eq(${columnIndexMap['纵向课题科研项目-校级']})`).text()) || 0;
                totals['论文-积分'] += parseFloat($row.find(`td:eq(${columnIndexMap['论文-积分']})`).text()) || 0;
                totals['讲座报告-积分'] += parseFloat($row.find(`td:eq(${columnIndexMap['讲座报告-积分']})`).text()) || 0;
                totals['教材软著-积分'] += parseFloat($row.find(`td:eq(${columnIndexMap['教材软著-积分']})`).text()) || 0;
                totals['成果转化-积分'] += parseFloat($row.find(`td:eq(${columnIndexMap['成果转化-积分']})`).text()) || 0;
                totals['专利-积分'] += parseFloat($row.find(`td:eq(${columnIndexMap['专利-积分']})`).text()) || 0;
                totals['软著-积分'] += parseFloat($row.find(`td:eq(${columnIndexMap['软著-积分']})`).text()) || 0;
                totals['奖励-积分'] += parseFloat($row.find(`td:eq(${columnIndexMap['奖励-积分']})`).text()) || 0;
                if (fixedIndexes.includes(index)) {
                    console.log("$tbody.find('tr').length:"+$tbody.find('tr').length)
                    insertTotalRow($tbody, totals, index);
                    resetTotals(totals); // 重置总计
                }
            });
            console.log("!@#!@$#:"+$tbody.find('tr').length)
            // 插入最后一组数据的总计行
            insertTotalRow($tbody, totals, $tbody.find('tr').length-1);
            function insertTotalRow($tbody, totals, index) {
                var $totalRow = $('<tr></tr>');

                $totalRow.append($('<td></td>').attr('colspan', '3').css('text-align', 'center').text('总计')); // 合并前3列
                $totalRow.append($('<td></td>').css('text-align', 'center').text(totals['横向课题科研项目']));
                $totalRow.append($('<td></td>').css('text-align', 'center').text(totals['纵向课题科研项目-校级以上']));
                $totalRow.append($('<td></td>').css('text-align', 'center').text(totals['纵向课题科研项目-校级']));
                $totalRow.append($('<td></td>').css('text-align', 'center').text(totals['论文-积分']));
                $totalRow.append($('<td></td>').css('text-align', 'center').text(totals['讲座报告-积分']));
                $totalRow.append($('<td></td>').css('text-align', 'center').text(totals['教材软著-积分']));
                $totalRow.append($('<td></td>').css('text-align', 'center').text(totals['成果转化-积分']));
                $totalRow.append($('<td></td>').css('text-align', 'center').text(totals['专利-积分']));
                $totalRow.append($('<td></td>').css('text-align', 'center').text(totals['软著-积分']));
                $totalRow.append($('<td></td>').css('text-align', 'center').text(totals['奖励-积分']));

                // 将总计行插入到指定位置（当前遍历的最后一行之后）
                $tbody.find('tr').eq(index).after($totalRow);
            }

            /**
             * 重置总计对象
             * @param {Object} totals 总计对象
             */
            function resetTotals(totals) {
                for (var key in totals) {
                    totals[key] = 0;
                }
            }
        })
    });

</script>
</body>

</html>